<template>
  <el-row>
    <div class="echarts-box">
      <el-card>
        <div :id="chartId" :style="{ width: '450px', height: '300px' }"></div
      ></el-card>
    </div>
  </el-row>
</template>
<script setup name="PieChart">
import * as echarts from "echarts";
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["confirm"]);

const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
  chartId:{
    type:String,
    default:'chart'
  }
});
//监听组件数据变化
watch(
  () => props.options,
  
  (newValue, oldValue) => {
    // console.log(newValue, oldValue)
    console.log(props.chartId+'重新构建图表')
    buildChart();
  },
  {
    deep:true
  }
);
function buildChart() {
  // console.log(props.options);
  setTimeout(() => {
    var chart = echarts.init(document.getElementById(props.chartId));
    // setOption前隐藏loading事件
    chart.setOption(props.options);
    window.onresize = function () {
      //自适应大小
      chart.resize();
    };
  }, 200);
  // 把配置和数据放这里
}
buildChart();
</script>


<style scoped>
.chart-container {
  width: 100%;
  float: left;
}
.el-col {
  padding: 30px 20px;
}
</style>